<template>
    <div style="padding: 30px" class="experPage">
        <div style="color: rgb(27, 76, 184)">
            <div class="addressIcon"></div>
            <span>{{$t('CurrentLocation')+'：'}}</span>
            <span style="cursor: pointer" @click="returnExper">{{adressTitleText}}</span>
            <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
            <span style="color: #333">{{$t('CreateProject')}}</span>
        </div>
        <Row style="margin-top: 20px;">
            <Col span="24" style="background-color: #fff;border-radius: 10px;padding: 30px 0" class="form-wrap">
                <div class="class-top">
                    <div class="class-title-wrap">
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active':blankText}" @click="changeTab('blank')">{{$t('CreateBlankProject')}}</div>
                            <div class="class-title-line" :class="{'line-active':blankLine}"></div>
                        </div>
                      <!--
                        <div style="margin:0 50px" class="class-title">
                            <div class="class-title-all" :class="{'active':batchText}" @click="changeTab('batch')">{{$t('RapidConstructionEngineering')}}</div>
                            <div class="class-title-line" :class="{'line-active':batchLine}"></div>
                        </div>
                        <div style="margin:0 50px" class="class-title">
                            <div class="class-title-all" :class="{'active':importText}" @click="changeTab('import')">{{$t('ImportProject')}}</div>
                            <div class="class-title-line" :class="{'line-active':importLine}"></div>
                        </div>
                        -->

                    </div>
                </div>
                <Divider />
                <div class="table-wrap" :style="{height:contentHei}">
                    <div v-show="blankText" style="margin: 20px;width: 500px">
                        <Form ref="createdProjectForm" :model="createdProjectForm" :rules="createdProjectRuleValidate" :label-width="120">
                            <FormItem :label="$t('ProjectName')" prop="name">
                                <Input v-model.trim="createdProjectForm.name" :placeholder="$t('Name')" @keydown.native.enter.prevent="searchHandle"></Input>
                            </FormItem>
                            <FormItem :label="$t('Scale')" prop="quotaTypeId">
                                <Select filterable v-model="createdProjectForm.quotaTypeId">
                                    <Option value="2">{{$t('SmallScale')}}</Option>
                                    <Option value="3">{{$t('Midsize')}}</Option>
                                    <Option value="4">{{$t('LargeScale')}}</Option>
                                    <Option value="5">{{$t('SuperLarge')}}</Option>
                                </Select>
                            </FormItem>
                            <FormItem :label="$t('Desc')" prop="description">
                                <Input v-model.trim="createdProjectForm.description" type="textarea"  :autosize="{minRows: 2,maxRows: 5}" :placeholder="$t('Desc')"></Input>
                            </FormItem>
                            <FormItem :label="$t('ProjectTem')" prop="envtempid">
                                <Button type="primary" ghost @click="toPlateTabs">{{$t('Select')}}</Button>
                                <div class="chose-wrap" v-show="useTemplateId != ''">
                                    <div style="display: flex;justify-content: flex-start;align-items: center">
                                        <img src="../../assets/exper/template.png" class="chose-s-icon">
                                        <div class="chose-name">{{this.useTempName}}</div>
                                    </div>
                                    <img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearTemp">
                                </div>
                            </FormItem>
                            <FormItem :label="$t('TemplateImportMethod')" prop="mode" v-show="useTemplateId != ''">
                                <Select filterable v-model="createdProjectForm.mode">
                                    <Option value="complete">{{$t('FullImport')}}</Option>
                                    <Option value="force">{{$t('ForceImport')}}</Option>
                                    <Option value="only_structure">{{$t('ImportTopologyOnly')}}</Option>
                                </Select>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="createdProSubmit('createdProjectForm')" :loading="submitProjectLoading">{{$t('Submit')}}</Button>
                                <Button @click="createdProReset('createdProjectForm')" style="margin-left: 8px">{{$t('Reset')}}</Button>
                            </FormItem>
                        </Form>
                    </div>
                    <div v-show="batchText" class="batchWrap">
                        <Form ref="creatManyProformValidate" :model="creatManyProformValidate" :rules="creatManyProRuleValidate" :label-width="120" style="width: 500px">
                            <FormItem :label="$t('ProjectName')" prop="name">
                                <Input v-model.trim="creatManyProformValidate.name" :placeholder="$t('Name')"></Input>
                            </FormItem>
                            <FormItem :label="$t('VlanNum')" prop="segmentCount">
                                <InputNumber :max="100000" :min="1" :step="1" v-model="creatManyProformValidate.segmentCount"></InputNumber>
                            </FormItem>
                        </Form>
                        <Collapse simple style="margin-left: 50px;width: 700px" >

                            <Panel name="1">
                               {{$t('Subnet')}}
                                <div slot="content" >
                                    <div class="scroll-wrap1">
                                        <div>
                                            <Form ref="subnetsForm" :model="subnetsForm" :label-width="60" >
                                                <FormItem
                                                        v-for="(item, index) in subnetsForm.subnets"
                                                        :key="index"
                                                        :label="'Item ' + (index+1)">
                                                    <div style="display: flex;justify-content: space-between">
                                                        <div style="display: flex;justify-content: flex-start">
                                                            <div>Cidr：</div>
                                                            <Input style="width: 150px" type="text" v-model="item.cidr" placeholder="10.1.1.0/24" @on-change="changeSubnetCidrInput($event,index)"></Input>
                                                        </div>
                                                        <div style="display: flex;justify-content: flex-start">
                                                            <div>{{$t('Prefix')+'：'}}</div>
                                                            <Input style="width: 150px" type="text" v-model="item.namePrefix" :placeholder="$t('Prefix')"></Input>
                                                        </div>
                                                        <div style="display: flex;justify-content: flex-start">
                                                            <div>{{$t('SubnetNum')+'：'}}</div>
                                                            <InputNumber style="width: 75px" :max="100000" :min="1" :step="1" v-model="item.subnetCount" @on-change="v=>{changeSubnetCount(v,index)}"></InputNumber>
                                                            <Button style="margin-left: 15px" @click="handleRemoveSubnets(index)" type="error">{{$t('Delete')}}</Button>
                                                        </div>
                                                    </div>
                                                </FormItem>
                                                <FormItem>
                                                    <Row>
                                                        <Col span="4">
                                                            <Button type="dashed" long @click="handleAddSubnets" class="md-add-jh">{{$t('Add')}}</Button>
                                                        </Col>
                                                    </Row>
                                                </FormItem>
                                            </Form>
                                        </div>
                                    </div>
                                </div>
                            </Panel>

                            <Panel name="2">
                                {{$t('VM')}}
                                <div slot="content">
                                    <div class="scroll-wrap2">
                                        <div style="margin-right: 12px">
                                            <Form ref="vmsForm" :model="vmsForm" :label-width="70">
                                                <FormItem v-for="(item, index) in vmsForm.vms" :key="index">
                                                    <Card style="width:500px">
                                                        <p slot="title">Item{{index+1}}</p>
                                                        <a href="#" slot="extra" @click="handleRemoveVms(index)">
                                                            <Icon size="24" type="ios-close" />
                                                        </a>
                                                        <Row style="margin-bottom: 10px">
                                                            <Col span="23">
                                                                <p style="display: inline-block;">{{$t('vmNum')+'：'}}</p>
                                                                <InputNumber style="width: 150px" :max="100000" :min="1" :step="1" v-model="item.vmCount"></InputNumber>
                                                            </Col>
                                                        </Row>
                                                        <Row style="margin-bottom: 10px">
                                                            <Col span="23">
                                                                <p style="display: inline-block;">{{$t('Prefix')+'：'}}</p>
                                                                <Input style="width: 300px" type="text" v-model="item.namePrefix" :placeholder="$t('Prefix')"></Input>
                                                            </Col>
                                                        </Row>
                                                        <Row style="margin-bottom: 10px">
                                                            <Col span="23">
                                                                <p style="display: inline-block;">{{$t('Type')+'：'}}</p>
                                                                <Select filterable :transfer="true"  v-model="item.vmType" :placeholder="$t('Type')" style="width: 300px" @on-change="v=>{selectVmType(v,index)}">
                                                                    <Option value="SERVER">SERVER</Option>
                                                                    <Option value="CLIENT">CLIENT</Option>
                                                                    <Option value="DRT">DRT</Option>
                                                                    <Option value="PRT">PRT</Option>
                                                                    <Option value="FW">FW</Option>
                                                                    <Option value="FLAG">FLAG</Option>
                                                                    <Option value="IDS">IDS</Option>
                                                                    <Option value="WAF">WAF</Option>
                                                                    <Option value="DES">DES</Option>
                                                                </Select>
                                                            </Col>
                                                        </Row>
                                                        <Row style="margin-bottom: 10px">
                                                            <Col span="23">
                                                                <p style="display: inline-block;">{{$t('Image')+'：'}}</p>
                                                                <Select filterable :transfer="true" label-in-value v-model="item.imageId" filterable :placeholder="$t('Image')"  style="width: 300px"  @on-change="v=>{selectImage(v,index)}">
                                                                    <Option v-for="(value,key) in imageListArr[index]" :key="key" :value="value.id"  >{{value.name}}</Option>
                                                                </Select>
                                                            </Col>
                                                        </Row>
                                                        <Row>
                                                            <Col span="23">
                                                                <p style="display: inline-block;">{{$t('Flavor')+'：'}}</p>
                                                                <Select filterable  :transfer="true" filterable v-model="item.flavorId" :placeholder="$t('Flavor')"  style="width: 300px">
                                                                    <Option v-for="(m,n) in flavorListArr[index]" :key="n" :value="m.id">{{m.name}}</Option>
                                                                </Select>
                                                            </Col>
                                                        </Row>
                                                    </Card>
                                                </FormItem>
                                                <FormItem>
                                                    <Row>
                                                        <Col span="4">
                                                            <Button type="dashed" long @click="handleAddVms" class="md-add-jh">{{$t('Add')}}</Button>
                                                        </Col>
                                                    </Row>
                                                </FormItem>
                                            </Form>
                                        </div>
                                    </div>
                                </div>
                            </Panel>


                        </Collapse>

                        <div slot="footer" style="margin-top: 15px;margin-left: 50px">
                            <Button type="primary" @click="submitManyProject" :loading='submitManyProjectLoading' style="margin-right: 15px">{{$t('OK')}}</Button>
                            <Button @click="canleManyProModal">{{$t('Cancel')}}</Button>
                        </div>
                    </div>
                    <div v-show="importText" style="margin-left: 50px">
                        <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 15px">
                            <p style="width: 100px;">{{$t('TemplateImportMethod')}}</p>
                            <Select filterable v-model="mode" style="width: 200px;">
                                <Option value="complete">{{$t('FullImport')}}</Option>
                                <Option value="force">{{$t('ForceImport')}}</Option>
                                <Option value="only_structure">{{$t('ImportTopologyOnly')}}</Option>
                            </Select>
                        </div>
                        <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 15px">
                            <p style="width: 100px;">{{$t('SelecDoc')}}</p>
                            <div style="display: flex;justify-content: flex-start">
                                <Upload :action='upLoadUrl' :headers="setUpLoadHead"
                                        :before-upload="beforeUpload">
                                    <Button icon="ios-cloud-upload-outline">{{$t('SelecDoc')}}</Button>
                                </Upload>
                                <div v-if="uploadFile !== null">{{uploadFile.name}}</div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: flex-start;margin-top: 15px">
                            <Button type="primary" @click="importProject" :loading='importProjectLoading' style="margin-right: 15px">{{$t('OK')}}</Button>
                            <Button @click="canleImportProModal">{{$t('Cancel')}}</Button>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>

        <!--工程模板-->
        <Drawer :closable="true" :mask-closable="false" width="1000"
                v-model="addDeviceModel" class="deviceDrawer" style="z-index:2999">

            <div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeDistribution">
                <img src="../../assets/globalIcon/closeIcon.png" alt="Close">
            </div>
            <div style="display: flex;justify-content: flex-start;align-items: center">
                <div style="height: 8px;width: 8px;border-radius: 50%;background-color: #333"></div>
                <div style="margin-left: 5px;font-size: 18px;font-weight: 700">{{$t('PleaseSelectProjectTemp')}}</div>
            </div>

            <div style="display: flex;justify-content: space-between;margin-top: 20px">
                <div style="margin-left: 15px;font-size: 14px;font-weight: bold">{{$t('ProjectTem')}}</div>
                <div>
                    <i-select v-model="selectProTemModel"  placeholder="可见范围"  style="width: 150px" @on-change="changeTemplate">
                        <i-option value="range">平台</i-option>
                        <i-option value="system">系统</i-option>
                        <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
                    </i-select>
                    <Input v-model="searchTemNameInput" search :placeholder="$t('TemplateName')" @on-search="searchTemNameBtn" style="width: 200px;margin: 0 15px;"/>
                    <Button @click="refreshTem"><i class="el-icon-refresh-right" /></Button>
                </div>

            </div>
            <Divider />
            <div>
                <Table border :columns="templateCol" :data="templateList" :loading="proTemLoading" :max-height="setUserTableHei"></Table>
                <div style="display: flex;justify-content: center;margin: 15px 0">
                    <Page :total=templateTotal :page-size="templatePageSize" show-total show-elevator @on-change="temOnChange"/>
                </div>
            </div>


        </Drawer>

    </div>
</template>
<script>
    import $ from 'jquery'
    import cookieUse from '@/libs/cookie.js'
    import encryption from '@/libs/encryption.js'
    import {creatBlankPro,imgList,flavorList,batchSubmit} from '@/api/homer.js'
    import {getImageData} from '@/api/image.js'
    import {getTemplateData,getTempInfpByID} from '@/api/proTemplate.js'
    import {bindPro} from '@/api/new-exper.js'
    export default {
      name: 'crtproj',
      props: ['taskid'],
      data() {
            return {
                getToken:'',
                USER_ID:'',
                fullHeight: document.documentElement.clientHeight,
                fullWidth:document.documentElement.clientWidth,
                contentHei:'0px',
                // 跳转状态
                adressTitleText:this.$t('Homer'),
                fromPath:'',
                // 标签页
                blankText:true,
                blankLine:true,
                batchText:false,
                batchLine:false,
                importText:false,
                importLine:false,
                // 普通工程创建
                createdProjectForm:{
                    name:'',
                    description:'',
                    quotaTypeId:'2',
                    trainId:'0',
                    mode:'complete',
                },
                createdProjectRuleValidate:{
                    name:[
                        { required: true, max: 40,message:this.$t('ProjectNameLength'), trigger: 'blur' },
                    ],
                    description:[
                        { max: 200, message: this.$t('DescInfoMaxRange'), trigger: 'blur' },
                    ]
                },
                submitProjectLoading:false,
                useTemplateId:'',
                useTempName:'',
                // 工程模板
                addDeviceModel:false,
                templatePage:1,
                templatePageSize:14,
                templateTotal:0,
                templateList:[],
                templateCol:[
                    {
                        title:'序号',
                        type:'index',
                        width:60,
                        align:'left',
                    },
                    {
                        title:this.$t('TemplateName'),
                        key:'name',
                        align:'left',
                        render:(h,params)=>{
                            return h('div',{
                                style:{
                                    'white-space':'pre'
                                },
                            },params.row.name)
                        }
                    },
                    {
                        title:this.$t('visibility'),
                        key:'scope',
                        width:100,
                        align:'left'
                    },
                    {
                        title:this.$t('Creator'),
                        key:'creatorName',
                        width:150,
                        align:'left'
                    },
                    {
                        title:this.$t('Desc'),
                        key:'description',
                        align:'left'
                    },
                    {
                        title:this.$t('CTime'),
                        key:'createTime',
                        width:170,
                        align:'left',
                    },
                    {
                        title:this.$t('Action'),
                        key:'action',
                        align:'left',
                        width:120,
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.tempUserFlag){
                                text = this.$t('Used')
                            }else {
                                text = this.$t('use')
                            }
                            return h('a',{
                                style: {
                                    'display': 'flex',
                                    'justify-content': 'flex-start',
                                    'align-items': 'center',
                                    color:params.row.tempUserFlag?'#2f70ff':'grey'
                                },
                            },[
                                h('div', {
                                    on: {
                                        'click': ()=>{
                                            this.chooseTemp(params)
                                        },
                                    },
                                    style:{
                                        'margin-left':'15px',
                                    }
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: params.row.tempUserFlag?require('../../assets/globalIcon/choosed.png'):require('../../assets/globalIcon/add.png'),
                                        },
                                        style: {
                                            cursor: 'pointer',
                                            'margin-right':'5px',
                                            'vertical-align': 'middle',
                                            width:'16px',
                                            height:'16px',
                                            display:'inline-block',
                                        },
                                    }),
                                    h('span',{
                                        style: {
                                            cursor: 'pointer',
                                        },
                                    },text)
                                ])
                            ])
                        }
                    },
                ],
                searchTemplateName:'',
                proTemLoading:false,
                searchTemNameInput:'',
                selectProTemModel:'designer',
                templateVisibility:'',
                setUserTableHei:'700',
                // 批量创建
                creatManyProformValidate:{
                    name:'',
                    segmentCount:1,
                },
                creatManyProRuleValidate:{
                    name:[
                        { required: true,max: 40, message: this.$t('ProjectNameLength'), trigger: 'blur' }
                    ],
                },
                subnetsForm:{
                    subnets: []
                },
                vmsForm:{
                    vms: [
                        {
                            vmType: '',
                            namePrefix:'',
                            imageId:'',
                            flavorId:'',
                            vmCount:1,
                        }
                    ]
                },
                imageList:[],
                vmImageList:[],
                flavorList:[],
                submitManyProjectLoading:false,
                imageListArr:[],
                flavorListArr:[],
                // 导入工程
                upLoadUrl:`${this.baseURL}/topo-edit/projects/json/async/file`,
                setUpLoadHead:{'Authorization':this.getToken},
                uploadFile:null,
                importProjectLoading:false,
                mode:'complete'
            }
        },
        created(){
            // 获取用户id
            let November = sessionStorage.getItem('November')
            November = JSON.parse(encryption.SelfUseDecrypt(November))
            this.USER_ID = November.userId
            this.getToken = cookieUse.getCookie('desig-token')
            if(this.$route.query.action === 'homer'){
                this.fromPath = this.$route.query.action
            }else if(this.$route.query.action === 'project'){
                this.fromPath = this.$route.query.action
                this.adressTitleText = this.$t('AllProject')
            }else if(this.$route.query.action === 'taskProject'){
                this.createdProjectForm.trainId = this.$route.query.id
                this.useTemplateId = this.$route.query.temid
                this.useTempName = this.$route.query.name
                this.fromPath = this.$route.query.action
                this.adressTitleText = this.$t('TaskProject')
            }else if(this.$route.query.action === 'proTemplate'){
                this.fromPath = this.$route.query.action
                this.useTemplateId = this.$route.query.id
                this.useTempName = this.$route.query.name
                this.adressTitleText = this.$t('ProjectTem')
            }
        },
        mounted(){
            this.setStyle()
            $('.form-wrap .ivu-divider-horizontal').css({
                margin:0
            })
            window.onresize = () => {
                this.setStyle()
            }
        },
        beforeRouteLeave (to, from, next) {
            if(to.path === `/${this.$route.query.action}`){
                to.query.page = this.$route.query.page?this.$route.query.page:1
                next()
            }else {
                next()
            }
        },
        methods:{
            setStyle(){
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                this.contentHei =   this.fullHeight - 80 - 60 - 77 -101 - 250 +'px'  // 80是头部高度  60是上下padding,250 是后来调试时减掉的
                this.setUserTableHei = this.fullHeight - 212
                this.templatePageSize = Math.floor(this.setUserTableHei/50) - 1
            },
            // 返回上一层
            returnExper(){
                this.$router.push({
                    name: `${this.fromPath}`,
                    query:{
                        page:this.$route.query.page?this.$route.query.page:1,
                    }
                })
            },
            // 切换标签页
            changeTab(type){
                this.blankText = false
                this.blankLine = false
                this.batchText = false
                this.batchLine = false
                this.importText = false
                this.importLine = false
                if(type === 'blank'){
                    this.blankText = true
                    this.blankLine = true
                }else if(type === 'batch'){
                    this.batchText = true
                    this.batchLine = true
                    this.creatManyProject()
                }else if(type === 'import'){
                    this.importText = true
                    this.importLine = true
                    this.uploadFile = null
                    this.mode = 'complete'
                }
            },
            // 阻止回车键导致的刷新
            searchHandle(){

            },
            // 创建新工程
            createdProSubmit(name){
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        this.submitProjectLoading = true
                        let temId = ''
                        if(this.useTemplateId != ''){
                           // temId = `?templateId=${this.useTemplateId}&mode=${this.createdProjectForm.mode}`
                            temId = `${this.useTemplateId}`
                        }
                        this.createdProjectForm.trainId = parseInt(this.createdProjectForm.trainId)
                        creatBlankPro(temId,this.createdProjectForm,this.createdProjectForm.mode)
                            .then(res=>{
                                if(res.data.code === 1){
                                    let resultData = res.data.attribute.result
                                    if(resultData.status === 0){
                                        this.$Message.success(this.$t('ProjectSuccess'))
                                        setTimeout(()=>{
                                            this.returnExper()
                                        },3000)
                                    }
                                    // 取消模板
                                    this.useTempName = ''
                                    this.useTemplateId = ''
                                   let projectId = resultData.id;
                                    let projectName = resultData.name;

                                  // 关联任务和工程
                                  this.linkPro(projectId, projectName);


                                  // 关闭窗口
                                  this.$emit('closePopup');

                                }else if(res.data.code === 2){
                                  let resultData = res.data.attribute.result
                                    this.$Message.info({
                                        content:res.data.message,
                                        duration:3,
                                    })
                                    setTimeout(()=>{
                                        this.returnExper()
                                    },3000)
                                    // 取消模板
                                    this.useTempName = ''
                                    this.useTemplateId = ''
                                  let projectId = resultData.id;
                                  let projectName = resultData.name;

                                  // 关联任务和工程
                                  this.linkPro(projectId, projectName);

                                  // 关闭窗口
                                  this.$emit('closePopup');
                                }else {
                                    this.$Message.error({
                                        content:res.data.message,
                                        duration:3,
                                    })
                                }
                                this.submitProjectLoading = false
                            })
                            .catch(err=>{
                                console.log(err)
                                this.submitProjectLoading = false
                            })
                    }else {
                        this.$Message.error(this.$t('MessageVaild'));
                    }
                })
            },

          // 关联任务和工程
          linkPro(projectId, projectName){
            let params = {
              taskId:this.taskid,
              projectId:projectId,
              projectName:projectName,
            }

            bindPro(params)
              .then(res=>{
                if(res.data.code === 1){
                  this.proModal = false
                  // this.$Message.success({
                  //   content:this.$t('Success'),
                  //   duration:3,
                  // })
                }else {
                  this.$Message.error({
                    content:res.data.message,
                    duration:3,
                  })
                }
                this.saveLinkProLoding = false
              })
              .catch(err=>{
                console.log(err)
                this.saveLinkProLoding = false
                this.$Message.error(this.$t('ServerVolid'))
              })
          },


            createdProReset(name){
              this.useTempName = ''
              this.useTemplateId = ''
              this.$refs[name].resetFields();
            },
            // 选择工程模板
            toPlateTabs(){
              this.addDeviceModel = true
              this.templateList = []
              let query = {
                pageIndex: this.templatePage,
                pageSize: this.templatePageSize,
              }
              let params = {
                name: this.searchTemplateName,
                visibility: this.templateVisibility,
                type: 'project',
              }
                this.proTemLoading = true
                getTemplateData(params,query)
                    .then(res=>{
                        if(res.data.code === 1){
                            let pateInfo = res.data.data
                            this.templateTotal = pateInfo.total
                            let items = pateInfo.items
                            for(let i=0;i<items.length;i++){
                                items[i].tempUserFlag = false
                                if(items[i].id === this.useTemplateId){
                                    items[i].tempUserFlag = true
                                }
                            }
                            this.templateList = items
                        }else {
                            this.templateList = []
                            this.templateTotal = 0
                        }
                        this.proTemLoading = false
                    })
                    .catch(err=>{
                        this.proTemLoading = false
                        console.log(err)
                    })
            },
            temOnChange(val){
                this.templatePage = val
                this.toPlateTabs()
            },
            changeTemplate(val){
                this.templatePage = 1
                this.templateVisibility = val
                this.toPlateTabs()
            },
            searchTemNameBtn(val){
                this.templatePage = 1
                this.searchTemplateName = this.searchTemNameInput
                this.toPlateTabs()
            },
            refreshTem(){
                this.templatePage = 1
                 this.searchTemplateName = ''
                this.searchTemNameInput = ''
                this.templateVisibility = ''
                this.selectProTemModel = 'designer'
                this.toPlateTabs()
            },
            closeDistribution(){
                this.addDeviceModel = false
            },
            chooseTemp(params){
                if(params.row.tempUserFlag){
                    this.$Message.info({
                        content:this.$t('UsedTemplate'),
                        duration:3,
                    })
                }else {
                    let _index = params.row._index
                    for(let i=0;i<this.templateList.length;i++){
                        this.templateList[i].tempUserFlag = false
                    }
                    this.$set(this.templateList[_index],'tempUserFlag',true)
                    this.useTempName = params.row.name
                    this.useTemplateId =  params.row.id
                }
            },
            // 清除模板
            clearTemp(){
                this.useTempName = ''
                this.useTemplateId = ''
            },
            // 批量创建
            creatManyProject(){
                // 初始化表单
                this.creatManyProformValidate.name = ''
                this.creatManyProformValidate.segmentCount = 1
                this.subnetsForm.subnets = []
                this.vmsForm.vms = []
                this.vmsForm.vms.push({
                    vmType: '',
                    namePrefix:'',
                    imageId:'',
                    flavorId:'',
                    vmCount:1,
                })
                this.getVmImageListData()
                this.getFlavorListData()
            },
            handleRemoveSubnets(index){
                this.subnetsForm.subnets.splice(index,1)
            },
            handleAddSubnets(){
                this.subnetsForm.subnets.push({
                    cidr: '',
                    namePrefix:'',
                    subnetCount:1,
                });
            },
            getImageListData(val,index,nodeType){
                let formData = {
                    localvisibility:'all',
                    devicetype:val,
                }
                let params = {
                    queryScope :'usable',
                    nodeType:nodeType,
                    pageIndex: 1,
                    pageSize: 65535,
                }
                // 镜像
                    getImageData(params)
                        .then(res=>{
                            console.log(res)
                            if(res.data.code === 1){
                                this.imageList = res.data.data.list
                                this.$set(this.imageListArr,index,this.imageList)
                            }else{
                                this.$Message.error({
                                    content:res.data.message,
                                    duration:3,
                                })
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
            },
            getVmImageListData(){
                let params = {
                    queryScope :'usable',
                    pageIndex: 1,
                    pageSize: 65535,
                }
                getImageData(params)
                    .then(res=>{
                        if(res.data.code === 1){
                            this.vmImageList = res.data.data.list
                        }else{
                            this.$Message.error({
                                content:res.data.message,
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            getFlavorListData(){
                let formData = {
                    pageIndex:1,
                    pageSize:65535,
                }
                // 配额
                flavorList(formData)
                    .then(res=>{
                        console.log(res)
                        if(res.data.code === 1){
                            let flavorList = res.data.data.list
                            this.flavorList = flavorList
                            //this.flavorListArr[0] = flavorList
                            //this.$set(this.flavorListArr,index,this.flavorList)
                        }else {
                            this.$Message.error({
                                content:res.data.message,
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.$Message.error(this.$t('ServerVolid'))
                    })
            },
            handleAddVms(){
                this.vmsForm.vms.push({
                    vmType: '',
                    namePrefix:'',
                    imageId:'',
                    flavorId:'',
                    vmCount:1,
                });
                this.getFlavorListData()
            },
            handleRemoveVms(index){
                if(this.vmsForm.vms.length === 1){
                    this.$Message.info(this.$t('PleaseAddAtLeast'))
                    return false
                }else {
                    this.vmsForm.vms.splice(index,1)
                    this.imageListArr.splice(index,1)
                    this.flavorListArr.splice(index,1)
                }
            },
            submitManyProject(){
                this.creatManyProformValidate.subnets = this.subnetsForm.subnets
                this.creatManyProformValidate.vms = this.vmsForm.vms
                if(this.creatManyProformValidate.name == ''){
                    this.$Message.error(this.$t('ProjectNameEmpty'))
                    return false
                }
                for(let i=0;i<this.creatManyProformValidate.vms.length;i++){
                    if(this.creatManyProformValidate.vms[i].vmType == ''){
                        this.$Message.error(this.$t('PleaseSelectVMType'))
                        return false
                    }else if(this.creatManyProformValidate.vms[i].imageId == ''){
                        this.$Message.error(this.$t('PleaseSelectVMImage'))
                        return false
                    }else if(this.creatManyProformValidate.vms[i].flavorId == ''){
                        this.$Message.error(this.$t('PleaseSelectVMFlavor'))
                        return false
                    }
                }
                this.submitManyProjectLoading = true
                batchSubmit(this.creatManyProformValidate)
                    .then(res=>{
                        if(res.data.code === 1){
                            let result = res.data.attribute.result
                            this.submitManyProjectLoading = false
                            this.$Message.info({
                                content:this.$t('ProjectCreating'),
                                duration:2,
                            })
                            setTimeout(()=>{
                                this.returnExper()
                            },3000)
                        }else {
                            this.submitManyProjectLoading = false
                            this.$Message.error({
                                content:res.data.message,
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.submitManyProjectLoading = false
                        this.$Message.error(this.$t('ServerVolid'))
                    })
            },
            canleManyProModal(){

            },
            changeSubnetCount(v,index){
                if(v>1){
                    this.subnetsForm.subnets[index].cidr = ''
                }
            },
            changeSubnetCidrInput(e,index){
                this.subnetsForm.subnets[index].subnetCount = 1;
            },
            selectVmType(val,index){
                this.imageListArr[index] = []
                let nodeType = ''
                if(val === 'SERVER' || val === 'CLIENT'){
                    // this.imageListArr[index] = this.vmImageList
                    // //this.$set(this.imageListArr,index,this.vmImageList)
                    nodeType = 'VM'
                }else if(val === 'PRT' || val === 'DRT'){
                    nodeType = 'Drout'
                }else if(val === 'FLAG'){
                    nodeType = 'flag'
                }else if(val === 'FW'){
                    nodeType = 'firewall'
                }else if(val === 'IDS'){
                    nodeType = 'IDS'
                }else if(val === 'DES'){
                    nodeType = 'DES'
                }else if(val === 'WAF'){
                    nodeType = 'WAF'
                }
                this.getImageListData(val,index,nodeType)
                this.vmsForm.vms[index].imageId = ''
                this.vmsForm.vms[index].flavorId = ''
            },
            selectImage(val,index){
                //this.flavorListArr[index] = []
                // let arr = []
                // let minrem = item.minRam
                // let mindisk = item.minDisk
                // this.vmsForm.vms[index].flavorId = ''
                // let flavorList = this.flavorList
                // for(let i=0;i<flavorList.length;i++){
                //     let rootdisk = flavorList[i].disk
                //     let ram = flavorList[i].ram
                //     if(ram >= minrem && rootdisk >= mindisk){

                //         arr.push({
                //             id:flavorList[i].id,
                //             name:flavorList[i].name,
                //         })
                //         console.log(arr)
                //     }
                // }
                //this.$set(this.flavorListArr,index,arr)
                this.vmsForm.vms[index].imageId = val.value
                this.vmsForm.vms[index].imageName = val.label;
                let curImages = this.imageListArr[index].filter(item=> item.id===val.value)[0];
                this.flavorListArr[index] = this.flavorList.filter(item=>item.ram>curImages.minRam&&item.disk>curImages.minDisk);
            },
            // 导入工程
            beforeUpload(file){
                this.uploadFile = file;
                return false;
            },
            importProject(){
                let formData = new window.FormData()
                formData.append('file',this.uploadFile)
                if(!this.uploadFile){
                    this.$Message.error({
                        content:this.$t('pleaseSelecDoc'),
                        duration:3,
                    })
                    return false
                }
                this.importProjectLoading = true
                this.axios.post(`${this.baseURL}/topo-edit/projects/json/async/file?mode=${this.mode}`,formData,{
                    headers:{'Content-Type': 'application/json'}
                })
                    .then(res=>{
                        if(res.data.code === 1){
                            let result = res.data.attribute.result
                            this.importProjectLoading = false
                            this.$Message.info({
                                content:this.$t('ProjectImport'),
                                duration:2,
                            })
                            setTimeout(()=>{
                                this.returnExper()
                            },3000)
                        }else {
                            this.$Message.error({
                                content:res.data.message,
                                duration:3,
                            })
                            this.importProjectLoading = false
                        }
                    })
                    .catch(err=>{
                        this.importProjectLoading = false
                        console.log(err)
                    })
            },
            canleImportProModal(){
                this.importProjectLoading = false
                this.uploadFile = null
            },
        }
    }
</script>
<style scoped>

    .addressIcon{
        display: inline-block;
        height: 14px;
        width: 12px;
        background: url("../../assets/exper/addressIcon.png") no-repeat center;
        background-size: 100% 100%;
        margin-bottom: -1px;
    }
    .class-top{
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
    }
    .class-title-wrap{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .class-title{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .class-title-all{
        font-size: 16px;
        cursor: pointer;
        color: var(--default-color-level2);
    }
    .active{
        color: var(--default-color);
        font-size: 20px;
        font-weight: 600;
    }
    .class-title-line{
        background-color: transparent;
        height: 3px;
        border-radius: 1px;
        width: 50px;
        margin: 20px 0 3px 0;
    }
    .line-active{
        background-color: var(--default-color);;
    }
    .table-wrap{
        padding:0 30px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .table-wrap::-webkit-scrollbar{
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    .table-wrap::-webkit-scrollbar-thumb{
        /*滚动条里面小方块样式*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(209, 209, 209,0.6);
    }
    .table-wrap::-webkit-scrollbar-track{
        /*滚动条里面轨道样式*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: rgba(179, 179, 179, 0.1);
    }
    .batchWrap{
        margin: 20px;
        /*width: 800px;*/
    }
    .chose-wrap{
        display: flex;
        justify-content: space-between;
        padding: 3px 8px;
        background-color: var(--table-tr-hover-color);
        align-items: center;
        margin-top: 10px;
    }
    .chose-name{
        width: 300px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .chose-s-icon{
        width: 15px;
        height: 17px;
        display: inline-block;
        margin-bottom: 1px;
        margin-right: 10px;
    }
    .deviceDrawer{
        position: relative;
    }
</style>
<style>
    .deviceDrawer .ivu-drawer-body{
        overflow: inherit;
    }
</style>
